<template>
  <el-calendar ref="calendar" class="item_cell">
    <template #header="{ date }">
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-month')">
          <el-icon><CaretLeft /></el-icon>
        </el-button>
      </el-button-group>
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('next-month')">
          <el-icon><CaretRight /></el-icon>
        </el-button>
        <el-button
          size="small"
          @click="
            selectDate('today');
            ElMessage({ showClose: true, message: 'This is a today.' });
          "
        >
          <el-icon><Discount /></el-icon>回到今天
        </el-button>
      </el-button-group>
    </template>

    <template #date-cell="{ data }">
      <div :class="data.isSelected ? 'is-selected' : ''">
        <el-row>
          <el-col class="datastyle">
            {{ data.day.split("-").slice(2).join("-") }}
            {{ data.isSelected ? "യ" : "" }}</el-col
          >
        </el-row>
        <span>日程</span>
      </div>
    </template>
  </el-calendar>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";

const calendar = ref();
const selectDate = (val: string) => {
  calendar.value.selectDate(val);
};
</script>
<style scoped>
.is-selected {
  color: #ffd700;
}
.datastyle {
  line-height: 2.1875rem;
}
.item_cell {
  text-align: center;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
